<template>
  <div class="body">
    <el-row
      style="width: 100%; display: flex; justify-content: center; height: 100%"
    >
      <el-col
        :span="22"
        style="height: 90%; display: flex; align-items: center"
      >
        <el-row style="width: 100%;height: 100%;">
          <el-col
            :span="13"
            class="left-pane"
            style="
              display: flex;
              justify-content: space-around;
              flex-direction: column;
              align-items: center;
              height: 100%;
            "
          >
            <el-row style="margin-top: 60px;">
              <el-col
                :span="24"
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  color: rgb(56 58 61);
                "
              >
              <div style="width: 100%;margin-bottom: 10px;"><img src="../../../static/images/logo.png" alt="" style="width: 150px;float: left;"></div>
                <p class="hero-title">职业院校智慧教学管理系统</p>
              
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <img
                  src="../../../static/images/icon.png"
                  alt=""
                  class="illustration"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col
            :xs="{ span: 24, offset: 0 }"
            :sm="{ span: 24, offset: 0 }"
            :md="{ span: 7, offset: 1 }"
            :lg="{ span: 7, offset: 1 }"
            :xl="{ span: 7, offset: 1 }"
           class="login-pane"
           style="height: 100%;display: flex;align-items: center;"
          >
            <div  class="login-card" style="
              background: #ffffffb3;
              border-radius: 10px;
              display: flex;
              justify-content: center;
              flex-direction: column;
              width: 100%;
              box-shadow: rgb(143 206 238) 0px 0px 13px;
            ">
              <el-form ref="form" id="form" :rules="rules" :model="user">
              <el-row style="width: 100%">
                <el-col
                  :span="24"
                  style="
                    color: #9ea3ae;
                    display: flex;
                    justify-content: center;
                    height: 50px;
                    align-items: center;
                  "
                >
                  ——&nbsp;&nbsp;<span style="color: #282a2d; font-size: 21px"
                    >欢迎登录</span
                  >&nbsp;&nbsp;——
                </el-col>
              </el-row>
              <el-row style="width: 100%">
                <el-col
                  style="
                    color: #979ca4;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 13px;
                  "
                >
                  WELCOME&nbsp;&nbsp;TO&nbsp;&nbsp;LOGIN
                </el-col>
              </el-row>
              <el-row
                style="display: flex; justify-content: center; margin-top: 20px"
              >
                <el-col
                  style="
                    display: flex;
                    justify-content: center;
                    height: 60px;
                    align-items: center;
                  "
                  :span="16"
                >
                  <el-form-item prop="username" style="width: 100%">
                    <el-input
                      placeholder="请输入账号"
                      prefix-icon="el-icon-user"
                      v-model="user.username"
                      style="border-radius: 50%"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="display: flex; justify-content: center">
                <el-col
                  style="
                    display: flex;
                    justify-content: center;
                    height: 60px;
                    align-items: center;
                  "
                  :span="16"
                >
                  <el-form-item prop="password" style="width: 100%">
                    <el-input
                      placeholder="请输入密码"
                      prefix-icon="el-icon-lock"
                      v-model="user.password"
                      style="border-radius: 50%"
                      show-password
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="display: flex; justify-content: center">
                <el-col
                  style="
                    display: flex;
                    justify-content: space-between;
                    height: 60px;
                    align-items: center;
                  "
                  :span="16"
                >
                  <el-form-item
                    prop="code"
                    style="
                      width: 100%;
                      display: flex;
                      justify-content: flex-start;
                    "
                  >
                    <el-input
                      placeholder="请输入验证码"
                      prefix-icon="el-icon-key"
                      v-model="user.code"
                      style="border-radius: 50%; width: 60%"
                    >
                    </el-input>
                    <div
                      @click="initPage"
                      style="
                        display: flex;
                        align-items: flex-end;
                        margin-left: 20px;
                      "
                    >
                      <el-image
                        v-if="image"
                        :src="image"
                        style="
                          width: 100px;
                          height: 40px;
                          border-radius: 4px;
                          cursor: pointer;
                        "
                      >
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline">点击重新获取</i>
                        </div>
                      </el-image>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="display: flex; justify-content: center">
                <el-col
                  style="
                    display: flex;
                    justify-content: center;
                    height: 60px;
                    align-items: center;
                  "
                  :span="16"
                >
                  <el-button
                    @click="login"
                    @keyup.enter.native="login"
                    type="primary"
                    style="width: 100%; background-color: rgb(60 134 216)"
                    >登录</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- <div style="position: relative;height: 100%;">
        <main ref="main" class="select" style="display: flex;"></main>
        <div class="frosted-glass select">
          <div style="position: relative;top: -60px;">
            <el-image  src='../../../.././static/images/logo.png'></el-image>
            <p style="font-size: 30px; color: #004da1;">教师教学考核评价系统</p>
          </div>
          <div class="form" style="z-index: 99;">
            <el-form ref="form" label-width="60px" id="form" :rules="rules" :model="user">
              <el-form-item prop="username">
                <span style="color: #004da1;font-size: 22px;margin-right: 10px;">账&nbsp;&nbsp;&nbsp;号</span>
                <el-input @keyup.enter.native="login" v-model="user.username" clearable placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <span style="color: #004da1;font-size: 22px;margin-right: 10px;">密&nbsp;&nbsp;&nbsp;码</span>
                <el-input @keyup.enter.native="login" show-password v-model="user.password" clearable placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <div style="display: flex;align-items: center;height: 10px;">
                    <span style="color: #004da1;font-size: 22px;margin-right: 10px;">验证码</span>
                    <el-input @keyup.enter.native="login" v-model="user.code" clearable placeholder="请输入验证码" style="width: 140px;margin-right: 10px;"></el-input>
                    <div @click="initPage" style="display: flex;align-items: flex-end;">
                      <el-image v-if="image" :src="image" style="width: 100px;height: 40px;border-radius: 4px;cursor: pointer;">
                        <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline">点击重新获取</i>
                        </div>
                      </el-image>
                    </div>
                </div>
              </el-form-item>
              <el-form-item style="text-align: center;">
                <div style="position: absolute;right: 0;">
                  <el-button type="text" style="color: #222222;font-size: 16px;">忘记密码</el-button>
                  <el-button @click="login" @keyup.enter.native="login" type="primary" style="width: 80px;background-color: #004da1;">登录</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div> -->
    </el-row>
    <div class="footer" style="
        font-size: 14px;
        color: #6f6e6e;
        opacity: 0.7;
      ">
      <div style="text-align: center; margin-top: 40px; padding: 15px">
        版权所有©湖南科技职业学院软件学院 <br />
        <span>联系电话：0731-82862658</span> <br />
        地址：湖南省长沙市天心区中意3路62号（410004）
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from "js-cookie";
// import genrate from "@/util/login.js"
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: "",
        code: "",
        token: "",
      },
      image: null,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    initPage() {
      console.log("clilck");
      this.$get("/api/captcha").then((res) => {
        if (res.code == 200) {
          this.user.code = "";
          this.user.token = res.data.token;
          this.image = res.data.image;
        }
      });
    },
    login() {
      this.$refs["form"].validate((flag) => {
        if (flag) {
          this.$post("/api/login?" + this.$qs.stringify(this.user)).then(
            (res) => {
              if (res.code == 200) {
                Cookie.set("token", res.data.token, { expires: 7 });
                this.$store.commit("setHeader", res.data.header);
                this.$store.commit("setUser", res.data.user);
                this.$message.success("登录成功");
                this.$router.push("/home/index");
              } else if (res.code) {
                this.$message.error(res.msg);
                this.initPage();
                // this.$message.warning(res.msg)
              }
            }
          );
        }
      });
    },
  },
  created() {
    this.initPage();
  },
  mounted() {
    // this.$nextTick(_ => {
    //   genrate(this.$refs['main'], 50)
    // })
  },
};
</script>

<style lang="scss" scoped>
>>> .el-form-item__label {
  color: #fff;
}
.body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background: white;
  background: url("../../../static/images/bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -100px;
  // background: #dde9ff63;
  .select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .frosted-glass {
    position: fixed;
    width: 30vmax;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    backdrop-filter: blur(20px);
    transition: 0.5s ease;
    border-radius: 5px;
    // position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: center;
    height: auto;
    padding: 70px 50px;
    background: url("../../../static/images/blue water.jpg");
    &:hover {
      box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 20px;
    }
    .form {
      padding-left: 0.375em;
      font-size: 1em;
      font-weight: 200;
      color: black;
      box-sizing: border-box;
      padding: 15px;
    }

    // &::before,
    // &::after {
    //   content: "";
    //   position: absolute;
    //   top: -15px;
    //   bottom: -15px;
    //   left: -15px;
    //   right: -15px;
    //   border: 5px solid #24acf2;
    //   border-image: linear-gradient(45deg, gold, deeppink) 1;
    //   clip-path: inset(0px round 10px);
    //   animation: clippath 3s infinite linear;
    // }

    // &::after {
    //   animation: clippath 3s infinite -1.5s linear;
    // }
  }

  /* 登录页自定义样式与响应式适配 */
  .hero-title {
    width: 100%;
    text-align: center;
    font-weight: 900;
    /* 在不同视口宽度下自适应缩放，限制最小/最大尺寸 */
    font-size: clamp(22px, 4.2vw, 35px);
    margin: 0 12px;
  }
  .illustration {
    width: 100%;
    max-width: 600px;
    height: auto;
  }

  .login-card {
    min-height: 420px;
    max-width: 520px;
    margin: 0 auto;
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

// @keyframes clippath {
//   0% {
//     clip-path: inset(0 0 95% 0);
//     filter: hue-rotate(0deg);
//   }

//   25% {
//     clip-path: inset(0 95% 0 0);
//   }

//   50% {
//     clip-path: inset(95% 0 0 0);
//   }

//   75% {
//     clip-path: inset(0 0 0 95%);
//   }

//   100% {
//     clip-path: inset(0 0 95% 0);
//     filter: hue-rotate(360deg);
//   }
// }
/deep/ .el-form-item__label {
  color: #004da1;
  font-size: 20px;
}
@media (max-width: 640px) {
  .frosted-glass .title {
    font-size: 0.8em;
  }
}
@media (max-width: 768px) {
  .body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    background-size: cover;
    background-position: center;
    padding: 16px 12px;
  }

  .left-pane {
    width: 100% !important;
    flex-basis: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .illustration {
    display: none;
  }

  .hero-title {
    margin-left: 0;
    // margin-bottom: 12px;
  }
  .login-pane {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-card {
    width: 90vw;
    max-width: 480px;
    min-height: auto;
    padding: 16px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  .footer {
    position: static !important;
    margin-top: 12px;
  }
}
// .el-input .el-input--suffix{
//   display: inline-block;
// }
/deep/ .el-form-item__content {
  display: flex;
  position: relative;
}
</style>
